<template>
  <div class="choice">
    <div class="header">
      <div class="logo">
        <!-- <img src="../assets/tq1.png" alt="" class="tq1" /> -->
      </div>
      <div class="r">
        <div class="r1" @click="home">{{ $t('首页') }}</div>
        <div class="r1" @click="wj" v-if="$store.state.userInfoK.uid != ''">{{ $t('问卷') }}</div>
        <div class="r1" @click="zy">{{ $t('中文/English') }}</div>
        <!-- <div class="r1">{{ $t('关于我们') }}</div> -->
        <!-- <div class="r1">{{ $t('质量保证') }}</div> -->
        <!-- <div class="r1">{{ $t('服务') }}</div> -->
        <div v-if="$store.state.userInfoK.uid != ''" class="r1" @click="goToProfile">{{ $store.state.userInfoK.nick_name
          }}</div>
        <div v-else class="r1" @click="login" style="cursor: pointer;">{{ $t('登录') }}</div>
      </div>
    </div>
    <div class="choice-container">
      {{ $t('回答调查并赚取') }}
    </div>
    <div class="survey-grid" v-if="lll1.length > 0">
      <div v-for="(item, index) in lll1" :key="index" class="survey-item" @click="startSurvey(item.SurveyId)">
        <div class="time11">
          <div>
            <div class="earn">{{ $t('赚取') }}</div>
            <div class="points2">{{ `CPI:${item.CPI}` }}</div>
          </div>
        </div>
        <div class="points">
          <div class="time2">
            <div class="time2_time">{{ item.Name }}</div>
            <div class="time2_survey">{{ $t('国家:') + item.LanguageCode }}</div>
            <div class="time2_survey">{{ $t('调查编号:') + `${item.SurveyId}` }}</div>
          </div>
          <div class="time2_img"><img src="../assets/zzzz.png" class="time2_img_img" alt=""></div>
        </div>
      </div>
    </div>
    <div v-else class="choice-container">
      <div class="no-data">{{ $t('暂无数据') }}</div>
    </div>
    <div style="display: flex;justify-content: flex-end;padding: 0 50px;">
      <el-pagination v-model:current-page="pageIndex" @current-change="handleCurrentChange" background
        layout="prev, pager, next" :total="total" />
    </div>

    <el-dialog v-model="dialogVisible" :title="$t('人设信息语言')">
      <el-form :model="form2" ref="formRef" label-width="auto" style="max-width: 600px">
        <el-select v-model="form2.gj" :placeholder="$t('请选择语言')" style="width: 500px">
          <el-option :label="item.Country" :value="item.LanguageId" v-for="(item, kndex) in list22" :key="kndex" />
        </el-select>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="onSubmit1">确定</el-button>

        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible2" :title="$t('第') + currentPage + $t('题')" width="80vw">
      <div style="height: 50vh; overflow-y: auto;">
        <div v-for="(item, index) in list44" :key="index">
          <div v-if="currentPage === index + 1">
            <div>{{ item.QuestionText }}</div>
            <div v-if="item.QuestionType === 'Radio'">
              <el-radio-group v-model="item.answers">
                <el-radio :value="ktem.AnswerCode" size="large" v-for="(ktem, kndex) in item.AnswerCodes"
                  :key="kndex">{{
                    ktem.AnswerText
                  }}</el-radio>
              </el-radio-group>
            </div>
            <div v-if="item.QuestionType === 'MultiPunch'">
              <el-checkbox-group v-model="item.answers">
                <el-checkbox :label="ktem.AnswerText" :value="ktem.AnswerCode" size="large"
                  v-for="(ktem, kndex) in item.AnswerCodes" :key="kndex" />
              </el-checkbox-group>
            </div>
            <div v-if="item.QuestionType === 'Range'">
              <div style="margin-top: 50px;">
                <el-input v-model="item.answers" placeholder="Please input" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="display: flex; justify-content: flex-end; gap: 10px;">
        <el-button type="primary" @click="xxx1">{{ $t('上一题') }}</el-button>
        <el-button type="primary" @click="xxx2" v-if="currentPage !== list.length">{{ $t('下一题') }}</el-button>
        <el-button type="primary" @click="xxx4">{{ $t('提交') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElLoading } from 'element-plus'
import { ref } from 'vue'
import { saverespondent, entryurl, getAttributes, wjLanguages, wjQs, saveqs, wjlist, cleckwj } from "../api/index";
import { useRouter, useRoute } from "vue-router";
import { it } from 'element-plus/es/locales.mjs';
import { useI18n } from "vue-i18n"
const i18n = useI18n()
const { t } = useI18n();
const route = useRoute()
const router = useRouter()
const total = ref(0)
const surveys = ref([
  { id: '110585420', points: 25, time: 3 },
  { id: '129598933', points: 50, time: 6 },
  { id: '126433240', points: 42, time: 18 },
  { id: '1265332768', points: 26, time: 19 },
  { id: '126502914', points: 25, time: 4 },
  { id: '126503640', points: 50, time: 9 },
  { id: '126533768', points: 26, time: 19 },
  { id: '126473947', points: 50, time: 35 },
])
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const currentPage = ref(1)
const form2 = ref({
  gj: ''
})
const list22 = ref([])
const pageSize = ref(30)
const pageIndex = ref(1)
const list = ref([])
const list33 = ref([])
const list44 = ref([])
const onSubmit1 = async () => {
  list33.value = []
  list44.value = []
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  });
  try {
    let info2 = await wjQs({
      language_id: form2.value.gj,
      id: route.query.id
    });
    list33.value = JSON.parse(info2.data).result.data
    console.log(list33.value);

    list33.value.forEach(item => {
      if (item.QuestionType === 'Range') {
        item.answers = ''
      } else if (item.QuestionType === 'MultiPunch') {
        item.answers = []
      } else if (item.QuestionType === 'Radio') {
        item.answers = ''
      }
      if (item.QuestionType === 'Range' || item.QuestionType === 'MultiPunch' || item.QuestionType === 'Radio') {
        list44.value.push(item)
      }
    });
    console.log(list44.value);


    loading.close()
    dialogVisible.value = false;
    dialogVisible2.value = true
  } catch (error) {
    loading.close()
  }
}
const list2 = ref([])
const xxx1 = () => {
  currentPage.value--
}
const xxx2 = () => {
  currentPage.value++
}

const xxx4 = async () => {
  let daan = ''
  list44.value.forEach((item, index) => {
    if (item.answers != "") {
      if (item.QuestionType === 'MultiPunch') {
        item.answers = item.answers.join(',')
      }
      if (index === 0) {
        daan += `q${item.QuestionID}=${item.answers}`
      } else {
        daan += `&q${item.QuestionID}=${item.answers}`
      }
    }
  })
  let info = await saveqs({
    id: route.query.id,
    daan
  })
  dialogVisible2.value = false
  wjlistSo()


}
let lll1 = ref([])
const wjlistSo = async () => {
  let loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  });
  try {

    let info = await wjlist({
      id: route.query.id,
      pageIndex: pageIndex.value,
      pageSize: pageSize.value
    })
    if (info.code === 305) {
      let loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      wjLanguages({ id: route.query.id }).then(res => {
        list22.value = JSON.parse(res.data).result.data
        dialogVisible.value = true
        loading.close()
      }).catch(err => {
        ElMessage.success({
          message: t('获取语言失败'),
          offset: 100,
          duration: 5000,
        });

      })
      loading.close()
    } else {
      lll1.value = info.data.list
      total.value = info.data.meta.total
      console.log(lll1.value);
    }
    loading.close()
  } catch {
    loading.close()
  }



}
const handleCurrentChange = (e) => {
  wjlistSo()
}
wjlistSo()

const startSurvey = async (id) => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  });
  try {
    let info = await cleckwj({
      id: route.query.id,
      survey_id: id
    })

    window.open(info.data.url)
    loading.close()
  } catch {
    loading.close()
  }
  // TODO: Implement actual navigation or API call to start the survey
}
const home = () => {
  router.push('/home')
}
const wj = () => {
  router.push('/homepage')
}
const zy = () => {
  // i18n.locale.value
  if (i18n.locale.value === 'zh') {
    i18n.locale.value = 'en'
    cookie.set('localLang', 'en')
    location.reload()
  } else {
    i18n.locale.value = 'zh'
    cookie.set('localLang', 'zh')
    location.reload()
  }
}
const goToProfile = () => {
  router.push('/user')
}
const login = () => {
  router.push('/login')
}
</script>

<style lang="scss" scoped>
.choice {
  padding: 0 0 100px 0;

  .header {
    padding: 30px 100px;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(#409EFF, .8);
    color: #fff;

    .logo {
      width: 163px;
      height: 67px;

      img {
        width: 100%;
      }
    }

    .r {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .r1 {
        font-family: Arial, Arial;
        font-weight: normal;
        font-size: 25px;
        margin: 0 31px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }

  .choice-container {
    font-family: MicrosoftSansSerif;
    font-size: 26px;
    color: #000000;
    line-height: 41px;
    font-style: normal;
    text-transform: none;
    margin-bottom: 48px;
    padding: 0 50px;
  }

  .survey-grid {
    display: flex;
    padding: 0 50px;
    // justify-content: space-between;
    flex-wrap: wrap;

    .survey-item {
      width: 24%;
      height: 132px;
      background: #FFFFFF;
      border-radius: 10px 10px 10px 10px;
      margin-bottom: 28px;
      margin-right: 1%;
      display: flex;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

      .time11 {
        width: 154px;
        background: #0075DF;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        .earn {
          width: 100%;
          font-family: MicrosoftSansSerif;
          font-size: 20px;
          color: #FFFFFF;
          font-style: normal;
          text-transform: none;
        }

        .points2 {
          width: 100%;
          margin-top: 22px;
          font-family: MicrosoftSansSerif;
          font-size: 25px;
          color: #FFFFFF;
          font-style: normal;
          text-transform: none;
        }
      }

      .points {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 17px;

        .time2 {
          .time2_time {
            font-family: MicrosoftSansSerif;
            font-size: 26px;
            color: #0075DF;
            font-style: normal;
            text-transform: none;
          }

          .time2_survey {
            font-family: MicrosoftSansSerif;
            font-size: 15px;
            color: #7C7C7C;
            font-style: normal;
            text-transform: none;
            margin-top: 19px;
          }
        }

        .time2_img {
          .time2_img_img {
            width: 8px;
            height: 15px;
          }
        }
      }
    }
  }
}
</style>
